<script setup>
import { toRefs, watch } from 'vue';
import useStore from '../store';

const { todos } = useStore()
const { list, showList, changeDone, del, isCheckAll } = toRefs(todos)

// toRefs,把对象的每一项，都通过 ref 转化成响应式
// console.log('list', list.value);
// changeDone.value()

// const changeDone = (id) => {
//   todos.changeDone(id)
// }
// const del = (id) => {
//   todos.del(id)
// }

const changeAll = (event) => {
  // console.log('event', event.target.checked);
  todos.changeAll(event.target.checked)
}

// watch(list, (val) => {
//   localStorage.setItem('todos', JSON.stringify(val))
// }, { deep: true })

// pinia提供，可以监听整个 store 的状态，变化了就会触发回调
todos.$subscribe(
  () => {
    localStorage.setItem('todos', JSON.stringify(todos.list))
  }
)
</script>

<template>
  <section class="main">
    <!-- v-model 会根据 input 的类型，拆分成相对应的 属性和 方法 -->
    <!-- <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isCheckAll" /> -->
    <input id="toggle-all" class="toggle-all" type="checkbox" :checked="isCheckAll" @change="changeAll" />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li :class="{ completed: item.done }" v-for="item in showList" :key="item.id">
        <div class="view">
          <input class="toggle" type="checkbox" :checked="item.done" @change="changeDone(item.id)" />
          <label>{{ item.name }}</label>
          <button class="destroy" @click="del(item.id)"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
    </ul>
  </section>
</template>

<style lang="less" scoped>
</style>
